<template>
  <ContentWrap>
    <el-descriptions :column="1" border label-width="130">
      <el-descriptions-item label="合同名称">
        {{ detailData.contractName }}
      </el-descriptions-item>
      <el-descriptions-item label="合同编号">
        {{ detailData.contractNo }}
      </el-descriptions-item>
      <el-descriptions-item label="合同编号">
        {{ detailData.contractNo }}
      </el-descriptions-item>
      <!-- <el-descriptions-item label="合同状态" prop="contractStatus">
        <el-radio-group v-model="detailData.contractStatus" :disabled="true">
          <el-radio
            v-for="dict in getStrDictOptions(DICT_TYPE.CONTRACT_STATUS)"
            :key="dict.value"
            :label="dict.value"
          >
            {{ dict.label }}
          </el-radio>
        </el-radio-group>
      </el-descriptions-item> -->
      <el-descriptions-item label="甲方名称">
        {{ detailData.partyA }}
      </el-descriptions-item>
      <el-descriptions-item label="乙方名称">
        {{ detailData.partyB }}
      </el-descriptions-item>
      <el-descriptions-item label="合同税率">
        {{ detailData.contractTaxRate }}%
      </el-descriptions-item>
      <el-descriptions-item label="合同总金额(含税)" prop="contractAmountInclTax">
        {{ detailData.contractAmountInclTax }} 元
      </el-descriptions-item>
      <el-descriptions-item label="合同总金额(不含税)" prop="contractAmountExclTax">
        {{ detailData.contractAmountExclTax }} 元
      </el-descriptions-item>
      <el-descriptions-item label="合同责任部门">
        <el-select
          v-model="detailData.contractDepartmentId"
          placeholder="请选择合同责任部门"
          clearable
          filterable
          disabled
          class="!w-280px"
        >
          <el-option v-for="dict in deptList" :key="dict.id" :label="dict.name" :value="dict.id" />
        </el-select>
      </el-descriptions-item>
      <el-descriptions-item label="合同责任人">
        <el-select
          v-model="detailData.contractResponsiblePersonId"
          placeholder="请选择合同责任人"
          clearable
          filterable
          disabled
          class="!w-280px"
        >
          <el-option
            v-for="dict in userList"
            :key="dict.id"
            :label="dict.nickname"
            :value="dict.id"
          />
        </el-select>
      </el-descriptions-item>
      <el-descriptions-item label="责任人联系电话">
        {{ detailData.responsiblePersonPhone }}
      </el-descriptions-item>
      <el-descriptions-item label="甲方签署人员">
        {{ detailData.partyAManager }}
      </el-descriptions-item>
      <el-descriptions-item label="乙方公司名称">
        {{ detailData.partyBDepartment }}
      </el-descriptions-item>
      <el-descriptions-item label="乙方责任人">
        {{ detailData.partyBResponsiblePerson }}
      </el-descriptions-item>
      <el-descriptions-item label="乙方联系人电话">
        {{ detailData.partyBManagerPhone }}
      </el-descriptions-item>
      <el-descriptions-item label="乙方签署人员">
        {{ detailData.partyBManager }}
      </el-descriptions-item>
      <el-descriptions-item label="乙方联系人微信">
        {{ detailData.partyBManagerWx }}
      </el-descriptions-item>
      <el-descriptions-item label="乙方联系人邮箱">
        {{ detailData.partyBManagerEmail }}
      </el-descriptions-item>
      <el-descriptions-item label="付款信息" v-if="detailRespList">
        <div>
          <div
            v-for="item in detailRespList"
            :key="item.id"
            style="display: flex; align-items: center; margin-bottom: 10px"
          >
            <div
              style="
                width: 100px;
                height: 65px;
                text-align: center;
                line-height: 65px;
                background-color: #c5c5c5;
                margin-right: 10px;
              "
            >
              第{{ item.period }}期
            </div>
            <div
              style="
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                height: 65px;
                width: 620px;
              "
            >
              <div
                style="
                  width: 30%;
                  height: 30px;
                  display: flex;
                  align-items: center;
                  margin-bottom: 5px;
                "
              >
                <div style="width: 80px; text-align: right">应付金额：</div>
                <el-input v-model="item.planPaymentAmount" disabled class="!w-100px" />
              </div>
              <div
                style="
                  width: 36%;
                  height: 30px;
                  display: flex;
                  align-items: center;
                  margin-bottom: 5px;
                "
              >
                <div style="width: 100px; text-align: right">计划付款时间：</div>
                <el-input
                  :value="formatDate(item.planDate, 'YYYY-MM-DD')"
                  disabled
                  class="!w-120px"
                />
              </div>
              <div
                style="
                  width: 33%;
                  height: 30px;
                  display: flex;
                  align-items: center;
                  margin-bottom: 5px;
                "
              >
                <div style="width: 100px; text-align: right">对应合同比例：</div>
                <el-input v-model="item.planPaymentRatio" disabled class="!w-100px">
                  <template #append>%</template>
                </el-input>
              </div>
              <div style="width: 30%; height: 30px; display: flex; align-items: center">
                <div style="width: 80px; text-align: right">实付金额：</div>
                <el-input v-model="item.actualAmount" disabled class="!w-100px" />
              </div>
              <div style="width: 36%; height: 30px; display: flex; align-items: center">
                <div style="width: 100px; text-align: right">实际付款时间：</div>
                <el-input
                  :value="formatDate(item.actualDate, 'YYYY-MM-DD')"
                  disabled
                  class="!w-120px"
                />
              </div>
              <div style="width: 33%; height: 30px; display: flex; align-items: center">
                <div style="width: 100px; text-align: right">付款类型：</div>
                <el-input v-model="item.paymentType" disabled class="!w-100px" />
              </div>
            </div>
          </div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="紧急程度">
        <el-select v-model="detailData.urgencyLevel" class="!w-280px">
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.URGENCY_LEVEL)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-descriptions-item>

      <el-descriptions-item label="保密程度">
        <el-select
          v-model="detailData.confidentialityLevel"
          placeholder="请选择保密程度"
          class="!w-280px"
        >
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.CONFIDENTIALITY_LEVEL)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-descriptions-item>
      <el-descriptions-item label="签订时间">
        <el-date-picker
          v-model="detailData.signingDate"
          type="date"
          value-format="x"
          placeholder="选择签订时间"
          class="!w-280px"
        />
      </el-descriptions-item>
      <el-descriptions-item label="生效日期">
        <el-date-picker
          v-model="detailData.effectiveDate"
          type="date"
          value-format="x"
          placeholder="选择生效日期"
          class="!w-280px"
        />
      </el-descriptions-item>
      <el-descriptions-item label="终止日期">
        <el-date-picker
          v-model="detailData.expirationDate"
          type="date"
          value-format="x"
          placeholder="选择终止日期"
          class="!w-280px"
        />
      </el-descriptions-item>
      <el-descriptions-item label="摘要内容">
        <Editor v-model="detailData.contractSummary" height="150px" :readonly="true" />
      </el-descriptions-item>

      <el-descriptions-item label="合同关键页图片">
        <UploadImgsV2
          v-model:modelValue="contractKeyImages"
          :file-list="contractKeyImages"
          :disabled="true"
        />
      </el-descriptions-item>
    </el-descriptions>
  </ContentWrap>
</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import { ContractApi, ContractVO } from '@/api/erp/contract'
import { ContractFileRelationApi } from '@/api/erp/contractfilerelation'
import { getSimpleAllUserList } from '@/api/system/user' // 角色
import { getSimpleAllDeptList } from '@/api/system/dept' // 部门
import { formatDate } from '@/utils/formatTime.js'

defineOptions({ name: 'SupplierDetail' })

const { query } = useRoute() // 查询参数

const props = defineProps({
  id: propTypes.string.def(undefined)
})
const detailLoading = ref(false) // 表单的加载中
const detailData = ref<any>({}) // 详情数据
const detailRespList = ref([]) // 付款信息
const contractKeyImages = ref([]) // 关联图片
const queryId = query.id as unknown as number // 从 URL 传递过来的 id 编号

/** 获得数据 */
const getInfo = async () => {
  detailLoading.value = true
  getUserList()
  getDeptList()
  try {
    detailData.value = await ContractApi.getContract(props.id || queryId)
    detailRespList.value = detailData.value.paymentPlanRespVO?.detailRespVOS
    await initContractRelatedFiles()
  } finally {
    detailLoading.value = false
  }
}
defineExpose({ open: getInfo }) // 提供 open 方法，用于打开弹窗

/** 获取人员列表 */
const userList = ref([])
const getUserList = async () => {
  try {
    const data = await getSimpleAllUserList()
    userList.value = data
  } catch (err) {
    console.error('获取用户列表失败:', err)
  }
}

/** 获取部门列表 */
const deptList = ref([])
const getDeptList = async () => {
  try {
    const data = await getSimpleAllDeptList()
    deptList.value = data
  } catch (err) {
    console.error('获取用户列表失败:', err)
  }
}

/*获取合同已关联的文件列表*/
const initContractRelatedFiles = async () => {
  if (!detailData.value.id) return
  try {
    //  获取关联图片
    const data = await ContractFileRelationApi.getContractFileRelationPage({
      contractId: detailData.value.id,
      fileCategory: 'KEY_IMAGE'
    })
    // 分别赋值
    contractKeyImages.value = data.list.map((item) => ({
      id: item.infraFileId, // 文件ID
      url: item.previewUrl, //预览URL
      name: item.fileName, // 文件名
      type: item.fileFormat // 文件格式
    }))
  } catch (error) {
    ElMessage.error('获取合同关联文件失败')
    console.error('初始化失败：', error)
  }
}

/** 初始化 **/
onMounted(() => {
  getInfo()
})
</script>
